<template>
	<view class="container">
		<view id="map" class="map">

		</view>
		<view class="project-title" @click="showselectProject">
			{{queryProject.projectName}}
			<span v-if="!projectvisable">
				<uni-icons type="bottom" style="margin-top: 2rpx;" size="26"></uni-icons>
			</span>
			<span v-if="projectvisable">
				<uni-icons type="top" style="margin-top: 2rpx;" size="26"></uni-icons>
			</span>
		</view>
		<view class="project-box" v-show="projectvisable">
			<view class="project-item" v-for="(item,index) in projects" @click="selectProject(item)">
				{{item.projectName}}
			</view>

		</view>
		<view class="tools layer">

		</view>
		<view class="tools zoom">
			<view class="zoomGps" @click="openGIS.zoomLocation"></view>
			<view class="zoomIn" @click="openGIS.zoomIn"></view>
			<view class="zoomOut" @click="openGIS.zoomOut"></view>
		</view>
		<view class="tools measure">
			<view class="measureLength" @click="openGIS.measureLength"></view>
			<view class="measureArea" @click="openGIS.measureArea"></view>
			<view class="clearMeasure" @click="openGIS.measureClear"></view>

		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" horizontal="left" vertical="bottom"
			direction="horizontal" @trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				location: {},
				projectvisable: false,
				projects: [{
					projectName: "全部",
					id: ""
				}, {
					projectName: "项目1",
					id: "00001"
				}, {
					projectName: "项目2",
					id: "00002"
				}, {
					projectName: "项目3",
					id: "00003"
				}],
				queryProject: {},
				content: [{
						iconPath: '/static/image.png',
						selectedIconPath: '/static/image-active.png',
						text: '卫星定位',
						active: false,
						nav:'/pages/compass/satellite'
					},
					{
						iconPath: '/static/home.png',
						selectedIconPath: '/static/home-active.png',
						text: '样地样方',
						active: false,
						nav:'/pages/sampleplot/sampleplot/poltlist'
					},
					{
						iconPath: '/static/star.png',
						selectedIconPath: '/static/star-active.png',
						text: '数据上报',
						active: false,
						nav:'/pages/system/dataManage'
					}
				],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},

			}
		},
		mounted() {
			this.queryProject = this.projects[0]
		
			this.getLocation()
		},
		create() {

		},
		methods: {
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: (res => {
						that.location = {
							"latitude": res.latitude,
							"longitude": res.longitude,
						}
					})
				})
			},
			selectProject(item) {
				this.queryProject = item
				this.projectvisable = false
			},
			showselectProject() {
				this.projectvisable = true
			},
			trigger(e) {
				console.log(e)
				uni.navigateTo({
				    url: "/pages/index/user"
				});
				// uni.navigateTo({
				//     url: e.item.nav
				// });
			},
			fabClick(e) {
				console.log(111, e)
			}


		}
	}
</script>
<script module="openGIS" lang="renderjs">
	import GIS from "@/core/ol/ol"
	export default {
		data() {
			return {
				map: null,
				resource: require('@/common/resource.json')
			}
		},
		create() {

		},
		mounted() {
			this.initMap()
		},
		methods: {
			initMap() {
				let options = {
					container: 'map',
					baselayer: this.resource.basemap[1],
					center: [108.92, 34.23]
				}

				this.map = new GIS(options)

			},
			zoomIn() {
				if (this.map) {
					this.map.zoomIn()
				}
			},
			zoomOut() {
				if (this.map) {
					this.map.zoomOut()
				}
			},
			zoomLocation() {

			},
			measureLength() {
				if (this.map) {
					this.map.measureLength()
				}

			},
			measureArea() {
				if (this.map) {
					this.map.measureArea()
				}
			},
			measureClear() {
				if (this.map) {
					this.map.measureClear()
				}
			}

		},
		onHide() {
			if (this.map) {
				this.map.destroy()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100%;

		.map {
			width: 100%;
			height: 100%;
		}

		.project-title {
			position: absolute;
			height: 120rpx;
			width: 100%;
			background-color: #3498db;
			z-index: 100;
			top: 0;
			text-align: center;
			line-height: 120rpx;
			font-size: 35rpx;
			cursor: pointer;
		}

		.project-box {
			position: absolute;
			width: 100%;
			top: 120rpx;

			.project-item {
				width: 200rpx;
				height: 60rpx;
				background-color: #fff;
				margin: 0 auto;
				text-align: center;
				border-bottom: 1px solid #ccc;
				line-height: 60rpx;
			}

		}

		.tools {
			position: absolute;

			border-radius: 8rpx;
			// box-show:5rpx 5rpx;
			box-shadow: 2px 2px 10px #ccc;
			z-index: 100;

		}

		.layer {
			width: 65rpx;
			height: 65rpx;
			top: 180rpx;
			right: 20rpx;
			background-color: #fff;
			background-image: url("@/static/icons/layers.png");
			background-repeat: no-repeat;
			background-size: 50rpx 50rpx;
			background-position: center;

		}

		.zoom {
			width: 65rpx;
			height: 219rpx;
			right: 20rpx;
			bottom: 150rpx;

			.zoomGps {
				width: 65rpx;
				height: 65rpx;
				background-color: #fff;
				margin-bottom: 14rpx;
				border-radius: 8rpx;
				background-image: url("@/static/icons/location.png");
				background-repeat: no-repeat;
				background-size: 50rpx 50rpx;
				background-position: center;
			}

			.zoomIn {
				width: 65rpx;
				height: 65rpx;
				background-color: #fff;
				border-bottom: 1px solid #bbb;

				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
				background-image: url("@/static/icons/zoom_in.png");
				background-repeat: no-repeat;
				background-size: 50rpx 50rpx;
				background-position: center;
			}

			.zoomOut {
				width: 65rpx;
				height: 65rpx;
				background-color: #fff;
				border-bottom-left-radius: 8rpx;
				border-bottom-right-radius: 8rpx;
				background-image: url("@/static/icons/zoom_out.png");
				background-repeat: no-repeat;
				background-size: 50rpx 50rpx;
				background-position: center;

			}
		}

		.measure {
			width: 65rpx;
			height: 219rpx;
			left: 20rpx;
			bottom: 40%;

			.measureLength {
				width: 65rpx;
				height: 65rpx;
				background-color: #fff;
				border-bottom: 1px solid #bbb;
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
				background-image: url("@/static/icons/measure.png");
				background-repeat: no-repeat;
				background-size: 50rpx 50rpx;
				background-position: center;
			}

			.measureArea {
				width: 65rpx;
				height: 65rpx;
				background-color: #fff;
				border-bottom-left-radius: 8rpx;
				border-bottom-right-radius: 8rpx;
				background-image: url("@/static/icons/area.png");
				background-repeat: no-repeat;
				background-size: 50rpx 50rpx;
				background-position: center;
			}

			.clearMeasure {
				width: 65rpx;
				height: 65rpx;
				background-color: #fff;
				margin-top: 14rpx;
				border-radius: 8rpx;
				background-image: url("@/static/icons/eraser.png");
				background-repeat: no-repeat;
				background-size: 50rpx 50rpx;
				background-position: center;

			}

		}
	}
</style>
<style>
	.ol-tooltip {
		position: relative;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 4px;
		color: white;
		padding: 4px 8px;
		opacity: 0.7;
		white-space: nowrap;
		font-size: 12px;
		cursor: default;
		user-select: none;
	}

	.ol-tooltip-measure {
		opacity: 1;
		font-weight: bold;
	}

	.ol-tooltip-static {
		background-color: #ffcc33;
		color: black;
		border: 1px solid white;
	}

	.ol-tooltip-measure:before,
	.ol-tooltip-static:before {
		border-top: 6px solid rgba(0, 0, 0, 0.5);
		border-right: 6px solid transparent;
		border-left: 6px solid transparent;
		content: "";
		position: absolute;
		bottom: -6px;
		margin-left: -7px;
		left: 50%;
	}

	.ol-tooltip-static:before {
		border-top-color: #ffcc33;
	}
</style>